<template>
  <div class="config-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统配置</span>
        </div>
      </template>
      
      <el-form 
        :model="configForm" 
        label-width="120px" 
        ref="configFormRef"
        :rules="rules"
      >
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基础设置" name="basic">
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="configForm.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            
            <el-form-item label="页面标题" prop="pageTitle">
              <el-input v-model="configForm.pageTitle" placeholder="请输入页面标题" />
            </el-form-item>
            
            <el-form-item label="系统Logo">
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleLogoChange"
              >
                <img v-if="configForm.logoUrl" :src="configForm.logoUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <div class="upload-tip">建议上传正方形图片，尺寸不小于 120x120</div>
            </el-form-item>
          </el-tab-pane>
          
          <el-tab-pane label="借阅配置" name="borrow">
            <el-form-item label="借阅时长" prop="borrowDays">
              <el-input-number v-model="configForm.borrowDays" :min="1" :max="90" />
              <span class="form-item-note">天</span>
            </el-form-item>
            
            <el-form-item label="最大借阅数量" prop="maxBorrowCount">
              <el-input-number v-model="configForm.maxBorrowCount" :min="1" :max="50" />
              <span class="form-item-note">本</span>
            </el-form-item>
            
            <el-form-item label="超期罚款" prop="overdueFee">
              <el-input-number 
                v-model="configForm.overdueFee" 
                :min="0" 
                :precision="2" 
                :step="0.1" 
              />
              <span class="form-item-note">元/天</span>
            </el-form-item>
          </el-tab-pane>
          
          <el-tab-pane label="通知配置" name="notification">
            <el-form-item label="到期提醒">
              <el-switch
                v-model="configForm.enableExpirationNotice"
                active-text="开启"
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item v-if="configForm.enableExpirationNotice" label="提前提醒天数" prop="noticeBeforeDays">
              <el-input-number v-model="configForm.noticeBeforeDays" :min="1" :max="7" />
              <span class="form-item-note">天</span>
            </el-form-item>
            
            <el-form-item label="系统公告">
              <el-switch
                v-model="configForm.enableSystemNotice"
                active-text="开启"
                inactive-text="关闭"
              />
            </el-form-item>
            
            <el-form-item v-if="configForm.enableSystemNotice" label="公告内容" prop="systemNoticeContent">
              <el-input
                v-model="configForm.systemNoticeContent"
                type="textarea"
                rows="4"
                placeholder="请输入系统公告内容"
              />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        
        <div class="form-actions">
          <el-button type="primary" @click="saveConfig">保存配置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

const activeTab = ref('basic');
const configFormRef = ref(null);

const configForm = reactive({
  // 基础设置
  systemName: '图书管理系统',
  pageTitle: '图书管理系统 - 知识的殿堂',
  logoUrl: '/src/assets/logo.png',
  
  // 借阅配置
  borrowDays: 30,
  maxBorrowCount: 5,
  overdueFee: 0.5,
  
  // 通知配置
  enableExpirationNotice: true,
  noticeBeforeDays: 3,
  enableSystemNotice: true,
  systemNoticeContent: '欢迎使用图书管理系统！如有问题请联系管理员。'
});

const rules = {
  systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
  pageTitle: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
  borrowDays: [{ required: true, message: '请设置借阅时长', trigger: 'blur' }],
  maxBorrowCount: [{ required: true, message: '请设置最大借阅数量', trigger: 'blur' }],
  overdueFee: [{ required: true, message: '请设置超期罚款', trigger: 'blur' }],
  noticeBeforeDays: [{ required: true, message: '请设置提前提醒天数', trigger: 'blur' }],
  systemNoticeContent: [{ required: true, message: '请输入系统公告内容', trigger: 'blur' }]
};

const handleLogoChange = (file) => {
  // 在实际应用中，这里会处理文件上传和服务器交互
  // 这里为了演示，我们使用本地 URL
  const reader = new FileReader();
  reader.onload = (e) => {
    configForm.logoUrl = e.target.result;
  };
  reader.readAsDataURL(file.raw);
};

const saveConfig = async () => {
  if (!configFormRef.value) return;
  
  await configFormRef.value.validate((valid) => {
    if (valid) {
      // 在实际应用中，这里会将配置发送到服务器
      ElMessage.success('系统配置保存成功');
    }
  });
};

const resetForm = () => {
  if (configFormRef.value) {
    configFormRef.value.resetFields();
  }
};
</script>

<style scoped>
.config-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.form-item-note {
  margin-left: 10px;
  color: var(--el-text-color-secondary);
}

.avatar-uploader {
  text-align: center;
  width: 120px;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-tip {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 5px;
}
</style> 